// @mixin 是 Sass 中的一个关键字，用于创建可重用的 CSS 样式规则。
// 通过使用 @mixin，可以创建一组 CSS 样式规则，然后在需要的地方通过 @include 将这组样式规则应用到需要的选择器上。
// 这样可以避免重复编写相同的 CSS 样式规则，提高样式代码的可维护性和可重用性。
@mixin container {
  //注释：容器的样式
  background-color: var(--white);
  //注释：容器的背景色
  border: var(--border-in-light);
  //注释：容器的边框
  border-radius: 15px;
  //注释：容器的圆角
  box-shadow: var(--shadow);
  color: var(--black);
  background-color: var(--white);
  min-width: 600px;
  min-height: 480px;
  max-width: 1200px;

  display: flex;
  overflow: hidden;
  box-sizing: border-box;

  width: var(--window-width);
  height: var(--window-height);
}

.container {
  @include container;
}

// 当屏幕宽度不小于600px时应用以下样式
@media only screen and (min-width: 600px) {
  .tight-container {
    // 定义窗口宽度变量，设置为视窗宽度
    --window-width: 100vw;
    --window-height: var(--full-height);
    // 定义窗口内容宽度变量，计算时减去侧边栏宽度
    --window-content-width: calc(100% - var(--sidebar-width));

    @include container;

    max-width: 100vw;
    // 设置元素的最大高度为全局变量 --full-height 的值
    max-height: var(--full-height);

    // 设置元素的边框为直角，无圆角效果
    border-radius: 0;
    // 移除元素的边框，使其无边框样式
    border: 0;
  }
}

// 定义窗口内容区域的样式
.window-content {
  width: var(--window-content-width);
  height: 100%;
  // 使用flex布局以适应不同内容的排列
  display: flex;
  // 设置内容按照垂直方向排列，以便更好地利用空间
  flex-direction: column;
}